import * as THREE from "three";
console.log(THREE);

// 1. 创建渲染器,指定渲染的分辨率和尺寸,然后添加到body中
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.pixelRatio = window.devicePixelRatio; // 设置设备像素比
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的宽度和高度
document.body.append(renderer.domElement);

// 2. 创建场景
const scene = new THREE.Scene();

// 3. 创建相机
// 设置75度视野，相机的纵横比设置为画布的宽度除以其高度，近平面距离为0.01，远平面距离为1000
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 移动相机
camera.position.set(5, 5, 10);
camera.lookAt(0, 0, 0);

// 4. 创建辅助线物体
const axis = new THREE.AxesHelper(6);
scene.add(axis);

// 5. 添加立方体
const geometry = new THREE.BoxGeometry(4, 4, 4);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 6. 渲染，动画
const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  // cube.rotation.y += 0.01;
  const elapsedTime = clock.getElapsedTime(); // 返回已经过去的时间, 以秒为单位
  cube.rotation.y = elapsedTime * Math.PI; // 两秒自转一圈

  renderer.render(scene, camera);
}

animate();
